<template>
  <div class="index-header">
    <!--    顶栏-->
    <nav class="navbar index-header-bar">
      <el-row>
        <el-col :span="24" :offset="3"> </el-col>
        <el-col :span="12" :offset="6">
          <el-row style="margin-left: -30px">
            <el-col :span="2" :offset="2" class="index-header-bar-span">
              <a href="/">首页</a>
            </el-col>

            <el-col :span="2" :offset="1" class="index-header-bar-span">
              <a href="#" data-toggle="dropdown">商品分类</a>
              <ul class="dropdown-menu my-dropdown-menu-1">
                <li v-for="(category, index) in goodCategory" :key="index">
                  <a
                    class="my-dropdown-menu-li-1"
                    @click="
                      toCategory(category.goodCategoryId, category.goodCategory)
                    "
                    >{{ category.goodCategory }}</a
                  >
                </li>
              </ul>
            </el-col>

            <el-col :span="2" :offset="1" class="index-header-bar-span">
              <router-link to="" @click.native="checkLogin4"
                ><img
                  src="../../assets/shopcar.png"
                  alt=""
                  style="width: 20px"
                />我想要</router-link
              >
            </el-col>

            <el-col :span="2" :offset="1" class="index-header-bar-span">
              <a href="#" data-toggle="dropdown">个人中心</a>
              <ul class="dropdown-menu my-dropdown-menu-1">
                <li>
                  <a class="my-dropdown-menu-li-1" @click="checkLogin3"
                    >已购订单</a
                  >
                </li>
                <li>
                  <a class="my-dropdown-menu-li-1" @click="checkLogin5"
                    >个人闲置</a
                  >
                </li>
                <li>
                  <a class="my-dropdown-menu-li-1" @click="checkLogin8"
                    >个人捐赠</a
                  >
                </li>
                <li>
                  <a class="my-dropdown-menu-li-1" @click="checkLogin6"
                    >上传闲置</a
                  >
                </li>
                <li>
                  <a class="my-dropdown-menu-li-1" @click="checkLogin7"
                    >捐赠闲置</a
                  >
                </li>
              </ul>
            </el-col>

            <div id="loginyes" v-show="!isLogin">
              <el-col :span="2" :offset="1" class="index-header-bar-span">
                <a href="#" data-toggle="dropdown">登录/注册</a>
                <ul class="dropdown-menu my-dropdown-menu-1">
                  <li>
                    <a class="my-dropdown-menu-li-1" @click="checkLogin1"
                      >登录</a
                    >
                  </li>
                  <li>
                    <a class="my-dropdown-menu-li-1" @click="checkLogin2"
                      >注册</a
                    >
                  </li>
                </ul>
              </el-col>
            </div>

            <el-col :span="1" :offset="1" id="el_head">
              <img src="../../../img/head_photo.jpg" alt="" id="head_photo" />
            </el-col>
            <el-col :span="3" :offset="0" id="username">
              <a href="#" data-toggle="dropdown">&nbsp{{ name }}</a>
              <ul class="dropdown-menu my-dropdown-menu-1">
                <li>
                  <!--                  <a href="#" class="my-dropdown-menu-li-1">登录</a>-->
                  <a class="my-dropdown-menu-li-1" @click="personInfo"
                    >个人信息</a
                  >
                </li>
                <li>
                  <!--                  <a href="#" class="my-dropdown-menu-li-1">登录</a>-->
                  <a class="my-dropdown-menu-li-1" @click="logout">退出</a>
                </li>
              </ul>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </nav>
    <!--    顶栏结束-->

    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <div style="text-align: center">
        <h4>{{ dialogValue }}</h4>
        <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            @click="centerDialogVisible = false"
            style="margin-top: 20px"
            >确 定</el-button
          >
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//import { mapGetters } from 'vuex'
export default {
  name: "index-header",
  data() {
    return {
      activeIndex: "1",
      centerDialogVisible: false,
      dialogValue: "",
      goodCategory: [],
      name: window.sessionStorage.getItem("name"),
      isLogin: window.sessionStorage.getItem("isLogin"),
      userId: window.sessionStorage.getItem("userId"),
    };
  },
  created() {
    let self = this;
    $.get(
      "http://waiterxiaoyy.free.idcfengye.com/web/getGoodsCategory",
      function (data) {
        self.goodCategory = data.data;
      },
      "json"
    );
  },
  methods: {
    checkLogin1() {
      if (!window.sessionStorage.getItem("isLogin")) {
        this.$router.push("/login");
      } else {
        this.$message({
          message: "请先登出账户",
          type: "warning",
          duration: 1000,
          showClose: true,
        });
      }
    },
    checkLogin2() {
      if (!window.sessionStorage.getItem("isLogin")) {
        this.$router.push("/register");
      } else {
        this.$message({
          message: "请先登出账户",
          type: "warning",
          duration: 1000,
          showClose: true,
        });
      }
    },
    checkLogin4() {
      if (window.sessionStorage.getItem("isLogin")) {
        this.$router.push("/shopCar#userId");
        window.location.reload();
      } else {
        this.$message({
          message: "请先登录账户",
          type: "warning",
          duration: 1000,
          showClose: true,
        });
      }
    },
    checkLogin3() {
      if (window.sessionStorage.getItem("isLogin")) {
        this.$router.push("/person#ordersDivId");
      } else {
        this.$message({
          message: "请先登录账户",
          type: "warning",
          duration: 1000,
          showClose: true,
        });
      }
    },

    checkLogin5() {
      if (window.sessionStorage.getItem("isLogin")) {
        this.$router.push("/person#userId");
      } else {
        this.$message({
          message: "请先登录账户",
          type: "warning",
          duration: 1000,
          showClose: true,
        });
      }
    },
    checkLogin6() {
      if (window.sessionStorage.getItem("isLogin")) {
        this.$router.push("/oldSail");
        location.reload();
      } else {
        this.$message({
          message: "请先登录账户",
          type: "warning",
          duration: 1000,
          showClose: true,
        });
      }
    },
    checkLogin7() {
      if (window.sessionStorage.getItem("isLogin")) {
        this.$router.push("/donationidle");
        location.reload();
      } else {
        this.$message({
          message: "请先登录账户",
          type: "warning",
          duration: 1000,
          showClose: true,
        });
      }
    },
    checkLogin8() {
      if (window.sessionStorage.getItem("isLogin")) {
        this.$router.push("/person#donation");
      } else {
        this.$message({
          message: "请先登录账户",
          type: "warning",
          duration: 1000,
          showClose: true,
        });
      }
    },
    logout() {
      window.sessionStorage.clear();
      window.location.reload();
    },
    toCategory(goodCategoryId, goodCategory) {
      this.$router.push({
        path: "/category",
        query: { goodCategoryId: goodCategoryId, goodCategory: goodCategory },
      });
    },
    personInfo() {
      if (window.sessionStorage.getItem("isLogin")) {
        this.$router.push("/person#userId");
      } else {
        this.$message({
          message: "请先登录账户",
          type: "warning",
          duration: 1000,
          showClose: true,
        });
      }
      return this.$router.push("/person-info");
    },
  },
};
</script>

<style scoped>
.index-header-bar {
  border-radius: 0;
  line-height: 40px;
  background-color: rgba(80, 80, 80, 0.5);
  /* position:fixed; */
  width: 100%;
  z-index: 999;
}

.navbar {
  height: 50px;
  min-height: 0;
}

.index-header-bar span {
  color: #000000;
  font-size: 12px;
  line-height: 34px;
}

.index-header-bar span:hover {
  color: yellow;
}

.index-header-bar-span {
  color: #000000;
  font-size: 30px;
  text-align: center;
  line-height: 34px;
  position: relative;
  width: 115px;
}

.index-header-bar-span:hover {
  background-color: transparent;
  border-bottom: 2px solid #fff;
}

.index-header-bar a {
  color: rgb(255, 255, 255);
  font-size: 19px;
  line-height: 34px;
  text-decoration: none;
  border: 0;
}

.index-header-bar a:hover {
  color: white;
}

.my-dropdown-menu-1 {
  background-color: rgba(80, 80, 80, 0.5);
  text-align: center;
  min-width: 80px;
}

.my-dropdown-menu-li-1:hover {
  background-color: rgba(80, 80, 80, 0.5);
}

.my-el-menu-1 {
  border-bottom: 0;
}

.my-el-menu-1 > .el-menu-item.is-active {
  border-bottom: 2px solid rgba(80, 80, 80, 0.5);
}

.my-el-menu-item-1 {
  margin-left: 5%;
  line-height: 40px;
  height: 50px;
}

#head_photo {
  margin-top: 4px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

#username {
  color: #000000;
  font-size: 30px;
  text-align: center;
  line-height: 34px;
  position: relative;
}
</style>
